fix(doc): 修复title与搜索框文字无法垂直对齐的问题 by GaoNeng-wWw · Pull Request #298 · opentiny/tiny-editor

GaoNeng-wWw · 2025-08-01T01:39:51Z

PR

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our Commit Message Guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

Yes
No

Other information

Summary by CodeRabbit

Style
- Improved the appearance of navigation bar titles and search button placeholders by adjusting their height to better fit their content.

coderabbitai · 2025-08-01T01:39:57Z

Walkthrough

A CSS file in the documentation theme was updated to add two new style rules. These rules set the height property to fit-content for specific navigation bar and search button elements. No existing styles were changed or removed, and no code or public interface changes occurred.

Changes

Cohort / File(s)	Change Summary
Documentation Theme CSS `packages/docs/fluent-editor/.vitepress/theme/style.css`	Added two CSS rules to set `height: fit-content` for navbar title span and DocSearch button placeholder elements.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A nibble of CSS, a tweak so neat,
Navbar and search now fit so sweet.
With fit-content heights, the docs look right,
A rabbit’s hop brings style to light!
🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/docs/fluent-editor/.vitepress/theme/style.css (1)
107-113: Validate height: fit-content support & provide graceful fall-backs

height: fit-content is still classified as an experimental value for the height property. While it works in the latest Chromium-based browsers, it is not consistently supported (or is buggy) in several Safari and older Firefox versions. A simple regression in those browsers will bring back the vertical-alignment issue.

Consider adding a defensive fallback that will be honoured if the second declaration is ignored, and keep both selectors together to avoid duplication:
-.VPNavBarTitle .title > span {
-  height: fit-content;
-}
-
-.DocSearch-Button-Placeholder {
-  height: fit-content;
-}
+.VPNavBarTitle .title > span,
+.DocSearch-Button-Placeholder {
+  height: auto;        /* graceful fallback                */
+  height: fit-content; /* preferred behaviour (modern UA)  */
+}
Optionally, add vendor-prefixed values (-moz-fit-content, -webkit-fit-content) if you must target older engines.

Please verify the visual result in Safari ≤15.* and Firefox ESR to ensure no regressions were introduced.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2441ccf and 9e107f1.

📒 Files selected for processing (1)

packages/docs/fluent-editor/.vitepress/theme/style.css (1 hunks)

kagol · 2025-08-01T04:06:25Z

@GaoNeng-wWw 感谢发现并修复这个问题，这个问题确实很影响观感

kagol · 2025-08-01T12:49:37Z

@GaoNeng-wWw 我发现这个问题好像是这个PR引起的，这个PR设置了全局的样式 span: { height: 100% }
https://github.com/opentiny/tiny-editor/pull/297/files

多处样式受到了影响，我先回退下

kagol · 2025-10-20T07:10:34Z

@all-contributors please add @GaoNeng-wWw for code.

allcontributors · 2025-10-20T07:10:45Z

@kagol

I've put up a pull request to add @GaoNeng-wWw! 🎉

GaoNeng-wWw added 2 commits August 1, 2025 09:36

fix(doc): 修复title无法垂直对齐的问题

c1f2343

fix: search button verticel align

9e107f1

GaoNeng-wWw changed the title ~~fix(doc): 修复title无法垂直对齐的问题~~ fix(doc): 修复title与搜索框文字无法垂直对齐的问题 Aug 1, 2025

github-actions Bot added the bug Something isn't working label Aug 1, 2025

coderabbitai Bot reviewed Aug 1, 2025

View reviewed changes

kagol approved these changes Aug 1, 2025

View reviewed changes

kagol merged commit 950e452 into opentiny:main Aug 1, 2025
4 of 5 checks passed

allcontributors Bot mentioned this pull request Oct 20, 2025

docs: add GaoNeng-wWw as a contributor for code #358

Merged

Navigation Menu

Uh oh!

fix(doc): 修复title与搜索框文字无法垂直对齐的问题 - #298

fix(doc): 修复title与搜索框文字无法垂直对齐的问题#298
kagol merged 2 commits into
opentiny:mainfrom
GaoNeng-wWw:fix/title-align

GaoNeng-wWw commented Aug 1, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Aug 1, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

kagol commented Aug 1, 2025

Uh oh!

kagol commented Aug 1, 2025 •

edited

Loading

Uh oh!

kagol commented Oct 20, 2025

Uh oh!

allcontributors Bot commented Oct 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

GaoNeng-wWw commented Aug 1, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kagol commented Aug 1, 2025

Uh oh!

kagol commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kagol commented Oct 20, 2025

Uh oh!

allcontributors Bot commented Oct 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

GaoNeng-wWw commented Aug 1, 2025 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 1, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

kagol commented Aug 1, 2025 •

edited

Loading